<template>
	<view class="me">
		
		<uni-nav-bar left-icon="back" left-text="返回" right-text="菜单" title="导航栏组件"></uni-nav-bar>
		
		<u-avatar :src="userLoginInfo.userInfo.avatar"></u-avatar>
		<view>
			{{userLoginInfo.userInfo.nicekName}}
		</view>
		
		<!-- 实现微信登陆的相关逻辑 -->
		<button v-if="!userLoginInfo.loginState" open-type="getUserInfo" @getuserinfo="getUserInfo">点击微信登陆</button>
		
		<view v-for="(item ,index) in shopCart" :key="index">
			<view>商品名称：{{item.name}}</view>
			<view>单价：{{item.price}}</view>
			<view>数量：{{item.num}}</view>
		</view>
		<view>数量总计： {{shopCartNum}}</view>
		
		
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapActions
	} from 'vuex'
	
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	
	export default {
		computed:{
			...mapState(['userLoginInfo','shopCart']),
			...mapGetters(['shopCartNum'])
		},
		components: {uniNavBar},
		onLoad(){
			console.log(this.userLoginInfo.userInfo.nicekName)
			wx.getSetting({
				success: res =>{
					console.log(res)
					if(res.authSetting["scope.userInfo"]){
						uni.getUserInfo({
							success: res=> {
								// 我需要在这里更改 state vuex 中的数据信息
								this.userLoginAction({
									loginState: true,
									getDataToken: 'XXXXXXXX',
									userInfo: {
										nicekName: res.userInfo.nickName,
										avatar: res.userInfo.avatarUrl
									}
								})
							},
							fail: ()=>{
								console.log('用户未授权！')
							}
						})
					}
				}
			})
		},
		methods: {
			...mapActions(['userLoginAction']),
			getUserInfo(){
				
				uni.getUserInfo({
					success: res=> {
						
						// 我需要在这里更改 state vuex 中的数据信息
						this.userLoginAction({
							loginState: true,
							getDataToken: 'XXXXXXXX',
							userInfo: {
								nicekName: res.userInfo.nickName,
								avatar: res.userInfo.avatarUrl
							}
						})
					},
					fail: ()=>{
						console.log('用户未授权！')
					}
				})
			}
		}
	}
</script>

<style>
	.me{
		text-align: center;
	}
</style>
